<template>
  <div>
    <div class="refundApply">
      <div class="my-header">
        <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
        <strong>选择售后数量</strong>
        <i style="min-width: 0.65rem;"></i>
      </div>
      <div class="title">
        <span style="float:left;margin-right:2.5rem">选择</span>
        <span>规格/单价/数量</span>
        <span style="float:right">已付</span>
      </div>
      <div class="orderGoods">
        <div class="c-order" v-for="(item,index) in orderGoodsList" :key="index" v-if="item.returnId == 0">
          <i class="iconfont" v-if="orderData.orderStatus !== 2" :class="[item.check ? 'icon-select' :'icon-select-default']" @click="checked(item,index)"></i>
          <div class="order-mid">
            <p class="pro-title">{{item.sellingPoints}}</p>
            <p>&yen;{{item.goodsDiscountPrice|formatMoney}}x{{item.goodsNum}}</p>
            <p>货号：{{item.goodsCode}}</p>
            <p> 尺码：{{item.goodsSpec}}<span v-if="item.sizeAlias">({{item.sizeAlias}})</span></p>
          </div>
          <img :src="item.goodsImg" alt="" class="pic">
          <div class="order-right">
            <p>&yen;{{item.goodsDiscountPrice*item.goodsNum|formatMoney}}</p>

          </div>
          <div class="num-control"  v-if="orderData.orderStatus !== 2">
            <div class="cut" @click.stop="editProductNum({item:item,increment:-1})"></div>
            <input type="tel" pattern="^[1-9]\d*" v-model="item.returnNum" class="num-inp" :min="1" :max="item.goodsNum" @change="editProductNum({item:item,counter:item.returnNum})">
            <div class="add" @click.stop="editProductNum({item:item,increment:1})"></div>
          </div>
        </div>
      </div>
      <div class="bot-info">
        <span @click="selectedAllGoods"  v-if="orderData.orderStatus !== 2">
          <i class="iconfont" :class="[selectedAll ? 'icon-select' : 'icon-select-default']"></i>全选</span>
        <p>选择货品数量：{{totalNum}}</p>
        <p>可退货品金额：&yen;{{totalFee|formatMoney}}</p>
      </div>
      <div class="apply">
        <button @click="apply">确认售后货品</button>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getOrderDetails
  } from '@/api/order'
  import {
    mapGetters
  } from 'vuex'
  import {
    Toast
  } from 'mint-ui'
  export default {
    data() {
      return {
        orderData: {},
        flag: false,
        check: false,
        selectedAll: false,
        orderGoodsList: [],
        totalFee: 0,
        totalNum: 0,
        orderGoodsId: 0,
        goodsNum: ''
      }
    },
    watch: {},
    components: {},
    created() {
      this.fetchData()
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      editProductNum({
        item,
        increment,
        counter
      }) {
        const count = Number(counter)
        // 通过输入框输入
        if (increment === undefined) {
          if (isNaN(count) || item.returnNum <= 1) {
            item.returnNum = item.goodsNum
          } else if (item.returnNum >= item.goodsNum) {
            Toast({
              message: '最多只能申请' + item.goodsNum + '件商品',
              duration: 1000
            })
            item.returnNum = item.goodsNum
            return false
          } else if (item.returnNum <= 1) {
            Toast({
              message: '不能再少了',
              duration: 1000
            })
            return false
          }
        } else {
          // 通过加减号
          if (Number(increment) > 0 && item.returnNum >= item.goodsNum) {
            Toast({
              message: '最多只能申请' + item.goodsNum + '件商品',
              duration: 1000
            })
            return false
          } else if (Number(increment) < 0 && item.returnNum <= 1) {
            Toast({
              message: '不能再少了',
              duration: 1000
            })
            return false
          } else {
            item.returnNum = item.returnNum + increment
          }
        }
        this.computedTotalFee()
      },
      fetchData() {
        // 判断是否登录
        if (!this.userInfo) return
        // 获取购物车信息
        const formData = {
          userId: this.userInfo.id,
          orderId: this.$route.query.orderId
        }
        getOrderDetails(formData).then(res => {
          this.orderData = res.data.orderDetails
          this.orderData.orderGoodsList.forEach(size => {
            // 如果没有售后
            if (size.returnId === '0') {
              this.orderGoodsList.push(size)
            }
            this.$set(size, 'check', false)
            this.$set(size, 'returnNum', size.goodsNum)
          })
          if (this.orderData.orderStatus === 2) {
            this.selectedAllGoods()
          }
        })
      },
      checked(item, index) { // 选择商品
        item.check = !item.check
        let count = 0
        this.orderGoodsList.forEach(item => {
          if (item.check) return count++
        })
        if (count === this.orderGoodsList.length) {
          this.selectedAll = true
        } else {
          this.selectedAll = false
        }
        this.computedTotalFee()
      },
      selectedAllGoods() { // 选择所有
        this.orderGoodsList.forEach(store => {
          store.check = !this.selectedAll
        })
        this.selectedAll = !this.selectedAll
        this.computedTotalFee()
      },
      computedTotalFee() { // 合计费用
        let computedFee = 0
        let computedNum = 0
        let goodsId = ''
        let goodsNum = ''
        this.orderGoodsList.forEach(store => {
          if (store.check) {
            computedFee += store.returnNum * parseFloat(store.goodsDiscountPrice)
            computedNum += store.returnNum
            goodsId = goodsId + store.id + ','
            goodsNum += store.returnNum + ','
          }
        })
        goodsId = goodsId.substring(0, goodsId.length - 1)
        goodsNum = goodsNum.substring(0, goodsNum.length - 1)
        this.goodsNum = goodsNum
        this.orderGoodsId = goodsId
        this.totalFee = computedFee
        this.totalNum = computedNum
      },
      apply() {
        if (this.totalNum === 0) {
          Toast('请选择售后商品')
        } else {
          this.$router.push({
            name: 'fillRefundInfo',
            query: {
              orderId: this.$route.query.orderId,
              orderGoodsId: this.orderGoodsId,
              num: this.goodsNum
            }
          })
        }
        // if (this.orderData.orderStatus === 2) {
        //   this.selectedAllGoods()
        //   this.$router.push({
        //     name: 'fillRefundInfo',
        //     query: {
        //       orderId: this.$route.query.orderId,
        //       orderGoodsId: this.orderGoodsId,
        //       num: this.goodsNum
        //     }
        //   })
        // } else {
        //   if (this.totalNum === 0) {
        //     Toast('请选择售后商品')
        //   } else {
        //     this.$router.push({
        //       name: 'fillRefundInfo',
        //       query: {
        //         orderId: this.$route.query.orderId,
        //         orderGoodsId: this.orderGoodsId,
        //         num: this.goodsNum
        //       }
        //     })
        //   }
        // }
      }
    }
  }

</script>
<style lang="scss">
  @import '~assets/common/css/mixin.scss';
  .refundApply {
    min-height: 100vh;
    padding-top: 1.25rem;
    padding-bottom: 105px;
    background-color: #fff; // header {
    //   height: 45px;
    //   background-color: #FFF;
    //   color: #000;
    //   border-bottom: 1px solid #ECECEC;
    //   z-index: 2!important;
    // }
    .title {
      height: 35px;
      line-height: 35px;
      background-color: #fff;
      padding: 0 15px;
      position: fixed;
      z-index: 1;
      width: 100%;
    }
    .orderGoods {
      padding-top: 35px;
      .c-order {
        padding: 10px 70px 10px 130px;
        background-color: rgb(252, 252, 252);
        overflow: hidden;
        margin-bottom: 3px;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          margin-top: -10px;
          left: 15px;
        }
        .pic {
          position: relative;
          float: left;
          width: 70px; // height: 85px;
          height: auto;
          margin-left: -100%;
          left: -85px;
        }
        .order-mid {
          position: relative;
          float: left;
          width: 100%;
          height: 100%; //   line-height: 25px;
          .pro-title {
            @include textoverflow(2);
            color: #333333;
          }
          p {
            color: rgb(190, 190, 190);
            margin-top: 10px;
          }
        }
        .order-right {
          position: absolute;
          width: 85px;
          margin-left: -190px;
          text-align: center;
          top: 50%;
          margin-top: -7px;
          right: 0px;
        }
        .num-control {
          position: absolute;
          bottom: 10px;
          right: 10px;
          background: #fff;
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          flex: initial;
          border-radius: 2px;
          border: 1px solid #eee;
          width: 2.5rem;
          .cut {
            padding: 2px 0;
            font-size: 14px;
            text-align: center;
            width: 30%;
            height: .6rem;
            position: relative;
            cursor: pointer;
            &:before {
              content: '';
              position: absolute;
              right: 0;
              top: 0;
              background: #eee;
              width: 1px;
              height: 100%;
            }
            &:after {
              content: '';
              position: absolute;
              left: calc(100%/2 - 5px);
              top: 50%;
              background: #999;
              width: 40%;
              height: 1px;
            }
          }
          .add {
            padding: 2px 0;
            width: 30%;
            height: .6rem;
            font-size: 14px;
            text-align: center;
            position: relative;
            cursor: pointer;
            &:before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              background: #eee;
              width: 1px;
              height: 100%;
            }
            &:after {
              content: '+';
              position: absolute;
              left: calc(100%/2 - 5px);
              top: calc(100%/2 - 8px);
              font-size: 14px;
              color: #999; // width: 50%;
              // height: 1px;
            }
          }
          .num-inp {
            border: none;
            outline: none;
            text-align: center;
            padding: 0 5px;
            width: 40%;
            font-size: 12px;
          }
        }
      }
    }
    .bot-info {
      height: 60px;
      width: 100%;
      background-color: #FFF9D7;
      color: #767676;
      text-align: right;
      line-height: 20px;
      padding: 10px 15px;
      position: fixed;
      bottom: 45px;
      span {
        position: absolute;
        left: 15px;
        top: 50%;
        margin-top: -12.5px;
        color: #000;
        line-height: 21px;
        i {
          vertical-align: middle;
          margin-right: 5px;
        }
      }
    }
    .apply {
      button {
        height: 45px;
        width: 100%;
        font-size: 14px;
        line-height: 45px;
        background-color: $red;
        color: #FFF;
        text-align: center;
        position: fixed;
        bottom: 0;
      }
    }
  }

</style>
